<div class="container">
  <mat-card>
    <div style="display: flex; flex-direction: row">
      <div>
        <div>
          <span style="display: flex;flex-direction: row;align-items: baseline;">
            <h1>会话列表</h1>
            <small style="margin-left: 10px;">你好 {{ user.username }}</small>
          </span>
          <button mat-button [routerLink]="['../create-room']">新建会话</button>
        </div>

        <div
          *ngIf="(rooms$ | async)?.items?.length > 0; else no_rooms"
          class="rooms"
        >
          <mat-selection-list
            [multiple]="false"
            (selectionChange)="onSelectRoom($event)"
          >
            <mat-list-option
              *ngFor="let room of (rooms$ | async)?.items"
              [value]="room"
            >
              Name: {{ room.name }} Id: {{ room.id }}
              <mat-divider></mat-divider>
            </mat-list-option>
          </mat-selection-list>
          <mat-paginator
            [length]="(rooms$ | async)?.meta?.totalItems"
            [pageIndex]="(rooms$ | async)?.meta?.currentPage"
            [pageSize]="(rooms$ | async)?.meta?.itemsPerPage"
            [pageSizeOptions]="[10, 25, 50]"
            (page)="onPaginateRooms($event)"
          ></mat-paginator>
        </div>
      </div>

      <div class="chatroom">
        <app-chat-room [chatRoom]="selectedRoom"></app-chat-room>
        <!-- <h1>会话1</h1>
        {{ selectedRoom | json }} -->
      </div>
    </div>
  </mat-card>
</div>

<ng-template #no_rooms>
  <div>
    <mat-error>目前没有会话，请新建会话</mat-error>
  </div>
</ng-template>
